<template>
	<u-popup :show="showPopup" :round="20" mode="bottom" :closeable='true' @close="close" @open="open">
		<view class="popup">
			<view class="title">
				<text class="h1">支付</text>
				<view class="price">
					<text>￥</text>{{ money }}
				</view>
			</view>

			<view class="type">
				<view v-for="(item,index) in payList" :key="index" @click="payIndex = index">
					<view class="type-1" v-if="item.show">
						<image class="icon" :src="item.icon" mode=""></image>
						<text class="name">{{ item.name }}支付</text>
						<image class="select"
							:src="payIndex === index ?  require('../../static/icon/s.png') : require('../../static/icon/no-s.png')"
							mode=""></image>
					</view>

				</view>
			</view>
			<view class="btn" @click="submit">
				立即支付
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		pay
	} from '@/config/utils'
	export default {
		props: {
			money: {
				default: 0
			},
			balance: {
				default: -1
			},
			orderId: {

			},
			tephone: {

			}
		},
		data() {
			return {
				showPopup: false,
				payList: [{
						name: '余额',
						value: 1,
						icon: "/static/confirm_order/5.png",
						disabled: false,
						pay_type: 'balance',
						show: false
					},
					// #ifndef APP
					{
						name: '微信',
						value: 4,
						icon: "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844672536278668.png",
						disabled: false,
						pay_type: 'wxpay',
						show: true
					},
					// #endif
					// #ifdef APP

					{
						name: '支付宝',
						icon: require('@/static/icon/ali.png'),
						value: 3,
						disabled: false,
						pay_type: 'alipay',
						show: true
					}
					// #endif
				],
				payIndex: 0,

			}
		},
		created() {
			// 获取余额
			// #ifdef APP

			// #endif
			if (this.balance >= this.money) {
				this.payList[0].show = true;
			}
		},
		methods: {
			close() {
				this.hide();
			},
			open() {},
			submit() {
				var that = this
				console.log(that.payIndex);
				let status
				// #ifndef APP

				if (that.payIndex == 1) {
					that.$http.post('api/pay/order', {
						order_sn: that.orderId,
						pay_type: 'h5微信'
					}).then(res => {
						uni.setStorageSync('order_info', {
							payType: res.pay_type,
							order_sn: res.order_sn,
							create_time: res.created_at,
							pay_money: res.money
						})
						pay(res.pay_data).then(res => {
							console.log(res, 'res打印的res ')
							uni.showToast({
								title: res,
								icon: 'success'
							})
							that.$http.post('api/send/sms', {
								phone: that.tephone,
								type: 1

							}).then(res => {
								console.log(res, 'res打印的res ')
								uni.showToast({
									title: res,
									icon: 'success'
								})
								setTimeout(() => {
									uni.redirectTo({
										url: '/bundle/pages/pay_success/pay_success'
									})

								}, 1000);
							});
						}).catch(re => {
							console.log(re);
						});
						// if (res == 200) {
						// 	that.$http.post('api/send/sms', {
						// 		phone: that.tephone,

						// 		type: 1

						// 	}).then(res => {
						// 		console.log(res, 'res打印的res ')
						// 		uni.showToast({
						// 			title: res,
						// 			icon: 'success'
						// 		})
						// 		setTimeout(() => {
						// 			uni.redirectTo({
						// 				url: '/bundle/pages/pay_success/pay_success'
						// 			})

						// 		}, 1000);
						// 	});
						// }

					})
				}
				// #endif
				if (that.payIndex == 0) {
					status = '余额'
					console.log(that.tephone, 'hahahahhahahhhhhh');
					that.$http.post('api/pay/order', {
						order_sn: that.orderId,
						pay_type: status
					}).then(res => {
						uni.setStorageSync('order_info', {
							payType: res.pay_type,
							order_sn: res.order_sn,
							create_time: res.created_at,
							pay_money: res.money
						})
						if (res = 200) {
							that.$http.post('api/send/sms', {
								phone: that.tephone,

								type: 1

							}).then(res => {
								console.log(res, 'res打印的res ')
								uni.showToast({
									title: res,
									icon: 'success'
								})
								setTimeout(() => {
									uni.redirectTo({
										url: '/bundle/pages/pay_success/pay_success'
									})

								}, 1000);
							});
						}

					})

				}

				// #ifdef APP-PLUS
				if (that.payIndex == 1) {
					status = 'app支付宝'
					console.log(that.orderId, '------------');
					that.$http.post('api/pay/order', {
						order_sn: that.orderId,
						pay_type: status
					}).then(res => {
						uni.setStorageSync('order_info', {
							payType: res.pay_type,
							order_sn: res.order_sn,
							create_time: res.created_at,
							pay_money: res.money
						})
						console.log(res, '******');
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: res.pay_data, //支付宝订单数据
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
								uni.showToast({
									icon: 'none',
									title: '支付成功'
								});
								that.$http.post('api/send/sms', {
									phone: that.tephone,

									type: 1

								}).then(res => {
									console.log(res, 'res打印的res ')
									uni.showToast({
										title: res,
										icon: 'success'
									})
									setTimeout(() => {
										uni.redirectTo({
											url: '/bundle/pages/pay_success/pay_success'
										})

									}, 1000);
								});

							},
							fail: function(err) {

								console.log('fail:' + JSON.stringify(err));
								uni.showToast({
									icon: 'none',
									title: '支付失败'
								});

							}
						});
					})
				}
				// #endif
				// else {
				// 	uni.showToast({
				// 		title: '暂不支持',
				// 		icon: 'none',
				// 	})
				// }
				that.showPopup = false;
			},
			hide() {
				this.showPopup = false;
			},
			show() {
				this.showPopup = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup {
		padding: 24rpx 32rpx 94rpx;

		.title {
			display: flex;
			align-items: flex-end;
			margin-bottom: 44rpx;

			.h1 {
				color: rgba(80, 80, 80, 1);
				font-size: 28rpx;
				margin-right: 18rpx;
				transform: translateY(-6rpx);
			}

			.price {
				display: flex;
				color: rgba(243, 151, 53, 1);
				font-size: 48rpx;
				font-weight: bold;
				align-items: flex-end;

				text {
					font-size: 28rpx;
					font-weight: normal;
					transform: translateY(-6rpx);
				}
			}
		}

		.type {
			&-1 {
				background-color: rgba(255, 255, 255, 1);
				border-radius: 24rpx;
				display: flex;
				align-items: center;
				height: 96rpx;
				margin-bottom: 24rpx;
				padding: 0 24rpx;

				.icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 12rpx;
				}

				.name {
					color: rgba(0, 0, 0, 1);
					font-size: 28rpx;
					flex: 1;
				}

				.select {
					width: 44rpx;
					height: 44rpx;
				}
			}
		}

		.btn {
			height: 88rpx;
			background-color: rgba(24, 181, 103, 1);
			border-radius: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: rgba(255, 255, 255, 1);
			font-size: 32rpx;
			margin-top: 60tpx;
		}
	}
</style>